<template>
	<view class="x-empty" :style="{height:height==-1 ? '100%' : height+'px' }">
		<view class="empty-page">
			<template v-if="hasNetwork">
				<image class="empty-page-image" mode="widthFix" :src="noDataImage"></image>
				<text class="empty-page-text">{{ noDataText }}</text>
			</template>
			<template v-else>
				<image class="empty-page-image"  mode="widthFix" :src="noNetworkImage"></image>
				<text class="empty-page-text">{{ noNetwrokText }}</text>
			</template>
			
			<button v-if="retry" class="empty-page-button x-btn" @tap="onRetry">点击重试</button>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			noDataImage: {
				type: String,
				default: require('@/static/empty/no-data.png')
			},
			noNetworkImage: {
				type: String,
				default: require('@/static/empty/no-network.png')
			},
			noDataText: {
				type: String,
				default: '暂无数据'
			},
			noNetwrokText: {
				type: String,
				default: '暂无网络'
			},
			offsetTop:{
				type: Number,
				default: 0, //以像素为单位
			},
			height: {
				type: Number,
				default: -1, //以像素为单位
			},
			retry: {
				type:Boolean,
				default: false,
			}
		},
		data() {
			return {
				hasNetwork: false
			}
		},
		created() {
			this.checkNetwork()
		},
		methods: {
			checkNetwork(isRetry) {
				// 判断网络状态，可使用 UniApp 提供的 API 或第三方库
				// 这里只是一个简单示例，假设通过uni.getNetworkType()获取网络类型
				uni.getNetworkType({
					success: (res) => {
						const networkType = res.networkType
						if (networkType === 'none') {
							// 无网络连接时显示无网络空白页
							this.hasNetwork = false
						} else {
							// 有网络连接时加载业务相关请求
							this.hasNetwork = true
							if (isRetry) {
								this.$emit('refresh')
							}
						}
					},
					fail: () => {
						this.hasNetwork = false
					}
				})
			},
			onRetry() {
				this.checkNetwork(true)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.x-empty {
		width: 100%;
		
		.empty-page {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			height: 100%;
			// border-top: 2rpx solid rgba(0, 0, 0, 0.1);
			// border-bottom: 2rpx solid rgba(0, 0, 0, 0.1);

			.empty-page-image {
				width: 200rpx;
				height: 200rpx;
			}

			.empty-page-text {
				margin-top: 20rpx;
				font-size: 28rpx;
				color: #999;
			}

			.empty-page-button {
				margin-top: 40rpx;
				padding: 10rpx 20rpx;
				border-radius: 4rpx;
				font-size: 28rpx;
				// color: #fff;
				// background-color: #333;
			}
		}
	}
</style>